<template>
  <div class="travelExpenses" id="printForm">
    <div class="travelExpenses-head">
      <img :src="objData.qrcode" class="travelExpenses-code" alt="" width="100" height="100" />
      <div class="travelExpenses-head-text">
        <h1>市内交通费报销单</h1>
        <p>填报日期：{{ objData.reimbursementDate }}</p>
      </div>
    </div>
    <table width="100%" height="31.25rem" border="1" align="center" cellpadding="1" cellspacing="1" class="table-form-1">
      <tr>
        <td>日期</td>
        <td>起止地点</td>
        <td>是由</td>
        <td>人员</td>
        <td>金额</td>
      </tr>
      <tr>
        <td>{{ trafficsData.trafficDate }}</td>
        <td></td>
        <td>{{ trafficsData.trafficContent }}</td>
        <td>{{ trafficsData.trafficName }}</td>
        <td>{{ trafficsData.amountCar }}</td>
      </tr>
      <tr>
        <td>合计：</td>
        <td colspan="3">人名币：{{ DX(parseFloat(trafficsData.amountCar)) }}</td>
        <td>¥{{  trafficsData.amountCar }}</td>
      </tr>
      <tr>
        <td>在何款开支：</td>
        <td colspan="4"></td>
      </tr>

      <!-- <tr>
        <td>分管部门院领导</td>
        <td></td>
        <td>部门负责人</td>
        <td></td>

      </tr> -->
      <!-- <tr>
        <td>会计审核</td>
        <td></td>

      </tr> -->
      <!-- <tr>
        <td colspan="4"></td>
        <td>经办人</td>
        <td></td>
      </tr> -->
    </table>
    <div class="sign">
      <div class="sign-list">
        <span>经办人：</span>
        <span></span>
      </div>
      <div class="sign-list">
        <span>证明人：</span>
        <span></span>
      </div>
      <div class="sign-list">
        <span>部门负责人：</span>
        <span></span>
      </div>
      <div class="sign-list">
        <span>核准：</span>
        <span></span>
      </div>
      <div class="sign-list">
        <span>会计：</span>
        <span></span>
      </div>
      <div class="sign-list">
        <span>出纳：</span>
        <span></span>
      </div>
    </div>
  </div>
  <div style="margin-top: 20px;">
    <el-button type="primary" v-print="'#printForm'" @click="doPrint">打印</el-button>
  </div>
</template>
<script setup>
import {ref, watch} from 'vue'
import {doGet} from "@/config/http";
import {svc, DX, genQrcodeStr} from "@/config/common";

const props = defineProps({
  trafficsData: {
    required: true,
    type: Array,
  },
  objData: {
    required: true,
    type: Object,
  },
})

const emit = defineEmits(['close', 'projectListSelect'])

// tab 切换
let activeName = ref('first')
// 基本数据
let objData = ref({})

let trafficsData = ref({})

// 附件
let fileList = ref([])


// // 单位列表
// let governmentList = ref([])
// // 主管部门
// let organizationList = ref([])

// const userList = ref([])
// const expenditurePtypeList = ref([])
// const expenditureFunctionalList = ref([])
// const expenditureEconomicList = ref([])
// const expenditureFiscalList = ref([])
// const expenditureSubjectList = ref([])

// let attachmentVisible = ref(false)

watch(() => [props.trafficsData, props.objData], async vals => {
  trafficsData.value = vals[0][0]
  objData.value = vals[1]
  let str = genQrcodeStr("expenditure.reimbursement.traffics", objData.value.id, objData.value['reimbursementCode'])
  let img = await doGet(svc, '/customCode/qrcode', {content: str, width:100, height:100}, false)
  objData.value.qrcode = 'data:image/gif;base64,' + img
},{immediate:true})

function doPrint() {
  console.log("doPrint", objData.value)
}
</script>

<style scoped>
.travelExpenses {
  width: 100%;
}
.travelExpenses-head {
  width: 100%;
  display: flex;
}
.travelExpenses-code {
  width: 6.25rem;
  height: 6.25rem;
}
.travelExpenses-head-text {
  width: 100%;
}
.travelExpenses-head-text h1 {
  height: 3.125rem;
  text-align: center;
  padding: 0;
  margin: 0;
}
.travelExpenses-head-text p {
  height: 3.125rem;
  text-align: right;
  font-size: 1rem;
  padding: 0;
  margin: 0;
}
.table-form-1 {
  border-collapse: collapse;
  text-align:center;
  table-layout:fixed;
  margin-top: .625rem;
}
td {
  padding: .625rem 0;
}
.sign {
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.sign-list {
  display: flex;
  align-items: center;
  font-size: 1rem;
  margin-top: 1.25rem;
}
.sign-list span:nth-child(1) {
  display: inline-block;
  width: 6.25rem;
  text-align: right;
}
.sign-list span:nth-child(2) {
  display: inline-block;
  width: 18.75rem;
  background: red;
}
</style>
